<template>
  <div class="page Device">
    <van-nav-bar title="设备信息" left-arrow @click-left="goBack"/>
    <van-tabs v-model="search.status" @change="searchFunc" color="#517df1" title-active-color="#517df1" title-inactive-color="#9d9d9d">
      <van-tab v-for="(item, index) in option.status" :key="index" :name="item.value">
        <template #title> 
          <div style="font-size: 14px; text-align: center;">
            <div>{{ item.label }}</div>
            <div style="font-size: 12px;">({{ item.number }})</div>
          </div>
        </template>
      </van-tab>
    </van-tabs>
    <top-search @search="searchFunc" v-model="search.content" bgcolor="#fff">
      <top-picker :option="option.type" v-model="search.type"></top-picker>
    </top-search>
    <div class="top-picker" v-if="$store.getters.ifAdmin || $store.getters.ifAgent">
      <div class="picker-item">
        <span @click="showSelePerson = true">
          <span>{{ search.User }}</span>
          <van-icon name="play" class="trans"/>
        </span>
      </div>
    </div>
    <van-list class="page-content" v-model="page.loading" :finished="page.finished" finished-text="没有更多了" @load="getList">
      <div class="list-item" v-for="(item, index) in list" :key="index">
        <div class="list-group flex-row" style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
          <div class="flex-row">
            <img :src="'./img/d0.png'" style="width: 0.6rem; height: 0.6rem; border-radius: 50%;"/>
            <span class="font-black" style="font-size: 14px; margin-left: 0.28rem;">{{ item.equipmentType }}口充电宝柜机</span>
          </div>
          <div v-if="!$store.getters.ifIntroducer">
            <span class="font-blue" v-if="$store.getters.ifTan" style="font-size: 14px; margin-right: 16px;" @click="showDevice(item)">设备管理</span>
            <span class="font-org" style="font-size: 14px;" @click="shengji(item)">设备升级</span>
          </div>
        </div>
        <div class="list-group justify">
          <div class="list-row">
            <span class="label-text" @click="$copy(item.equipmentNum)">设备编号</span>
            <span>{{ item.equipmentNum }}</span>
          </div>
          <div class="list-row">
            <span class="label-text">心跳时间</span>
            <span>{{ item.heartTime }}</span>
          </div>
          <div class="list-row" @click="$copy(item.iccid)">
            <span class="label-text">iccid</span>
            <span>{{ item.iccid }}</span>
          </div>
          <div class="list-row">
            <span class="label-text">shopId</span>
            <span>{{ item.shopId }}</span>
          </div>
          <div class="list-row">
            <span class="label-text">价格</span>
            <span class="font-org">{{ item.chargeMoney }}</span>
          </div>
          <div class="list-row">
            <span class="label-text">所属商家</span>
            <span class="font-blue">{{ item.shopName }}</span>
          </div>
          <div class="list-row">
            <span class="label-text">设备版本</span>
            <span>{{ item.bb }}</span>
          </div>
          <div style="height: 1.72rem; background: #f8f9fd; margin: 0.3rem 0; box-sizing: border-box; border-radius: 0.13rem;
            box-sizing: border-box; padding: 0.3rem 0.65rem;" class="flex-row">
            <div class="flex-col" v-for="type in bao" :key="type.key">
              <div class="flex-row">
                <img :src="type.img" style="width: 0.5rem; height: 0.5rem;"/>
                <span class="font-blue" style="margin-right: 0.1rem;">{{ item[type.key] }}{{ type.unit }}</span>
              </div>
              <span class="font-gray" style="font-size: 12px; margin-top: 0.1rem;">{{ type.label }}</span>
            </div>
          </div>
        </div>
      </div>
    </van-list>
    <sele-person v-model="showSelePerson" @submit="seleUser"></sele-person>
    <device-info ref="device"></device-info>
  </div>
</template>

<script>
import DeviceInfo from './DeviceInfo.vue';
export default {
  components: { DeviceInfo },
  data() {
    return {
      search: {
        content: '',
        type: 0,
        userId: '',
        status: 0,
        User: '全部设备'
      },

      page: {
        page: 1,
        size: 10,
        loading: false,
        finished: false
      },

      list: [],

      option: {
        type: [
          { label: '店铺名称', value: 0 },
          { label: '设备编号', value: 1 }
        ],
        orderStatus: [],
        status: [
          { label: '在线', value: 0, key: 'onLines' },
          { label: '离线', value: 1, key: 'offLine' },
          { label: '已绑', value: 2, key: 'isBinding' },
          { label: '未绑', value: 3, key: 'notBinding' },
          // { label: '故障', value: 4, key: 'fault' }
        ]
      },

      showSelePerson: false,

      bao: [
        { key: 'equipmentType', unit: '口', img: './img/d1.png', label: '设备型号' },
        { key: 'boorowSum', unit: '个', img: './img/d2.png', label: '可借宝数' },
        { key: 'returnSun', unit: '个', img: './img/d3.png', label: '可还宝数' }
      ]
    };
  },
  methods: {
    getNumber() {
      this.setNumber();
      this.$axios.get('/api/chargerPlaEquipmentController/getAllEquipmentStatus', {
        userId: this.$store.state.userInfo.userId
      }).then(res => {
        this.setNumber(res);
      });
    },
    setNumber(res) {
      res = res || {};
      let nav = JSON.parse(JSON.stringify( this.option.status ));
      nav.forEach((ele) => {
        ele.number = res[ele.key];
        if (isNaN(ele.number)) ele.number = '...';
      });
      this.option.status = nav;
    },
    getList() {
      let sPage = JSON.parse(JSON.stringify(this.page));
      let page = sPage.page, size = sPage.size;
      this.page.loading = true;
      
      let search = JSON.parse(JSON.stringify(this.search));
      let vague = search.status, userId = search.userId;
      let query = { page, size, vague, userId };
      if(search.type == 0) { query.equipmentNum = ''; query.content = search.content; } 
      else { query.equipmentNum = search.content; query.content = ''; }
      this.$axios.get('/api/chargerPlaEquipmentController/getChargerPlaEquipmentList', query).then(res => {
        if (search.status != this.search.status) return ;
        let json = res || {}; 
        let list = json.list || [];
        this.list.push( ...list );
        let finished = json.isLastPage ? true : false;
        this.page = { ...sPage, page: sPage.page + 1, loading: false, finished };
      }).catch(() => {
        this.page = { ...sPage, loading: false, finished: true };
      });
    },
    searchFunc() {
      this.page = { page: 1, size: 10, loading: false, finished: false };
      this.list = [];
      this.getList();
    },
    goBack() {
      this.$router.go(-1);
    },
    seleUser(user) {
      this.search = { ...this.search, userId: user.userId, User: user.nick + '名下设备' };
      this.searchFunc();
    },
    shengji(item) {
      this.$dialog.confirm({ message: `设备升级后会关闭设备大部分提示音，设备升级过程中请保持通电，确定现在要对设备进行升级吗？` }).then(() => {
        this.$axios.get('/api/chargerPlaEquipmentController/terminalVersion', {
          sn: item.equipmentNum
        }).then(res => {
          if(res.canUpdate) {
            this.$axios.get('/api/chargerPlaEquipmentController/terminalUpdate', {
              sn: item.equipmentNum
            }).then(() => {
              this.$toast('正在为该设备升级，请保证设备在升级过程中处于通电状态');
            });
          } else {
            this.$toast('设备已升级至最高版本');
          }
        });
      })
    },
    showDevice(item) {
      this.$refs.device.showBlank({
        shopName: item.shopName,
        equipmentNum: item.equipmentNum,
        shopPhotUrl: item.shopPhotUrl,
        createTime: item.createTime
      });
    }
  },
  mounted() { 
    this.search.userId = this.$store.state.userInfo.userId;
    if (this.$store.getters.ifIntroducer) {
      this.option.status = [
        { label: '在线', value: 0, key: 'onLines' },
        { label: '离线', value: 1, key: 'offLine' }
      ];
    }
    this.getNumber();
  }
};
</script>

<style lang="less">
.Device {
}
</style>
